<template>
  <div class="home">
    <my-header :list="list"></my-header>
    <my-table></my-table>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from '../components/myHeader.vue'
import myTable from '../components/myTable.vue'
import { reactive,toRefs } from 'vue';
import axios from 'axios';
export default {
  name: 'Home',
  components: {
    myHeader,
    myTable
  },
  setup() {
    const data = reactive({
       list:[],
    })
    axios.get('data.json').then(res => {
      data.list = res.data;
    })
    return {
      ...toRefs(data)
    }
  }

}
</script>
<style lang="scss" scoped>
   .home{
     padding: 30px;
   }
</style>